<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" title="选择宝贝" width="700px">
    <div style="margin-bottom: 5px;">
      <!--<span>
        <router-link :to= "{ path: '/commodity-list'}" tag="a" target="_blank" class="el-button el-button&#45;&#45;primary el-button&#45;&#45;mini">宝贝管理</router-link>
        <el-button size="mini" @click="refresh">刷新</el-button>
      </span>-->
      <span style="float: right">
        <!--商品弹框，搜索商品输入框-->
        <el-input
          v-model="query.name"
          suffix-icon="el-icon-search"
          clearable
          placeholder="请输入宝贝关键词"
          style="float: right; width: 180px;"
          class="filter-item"
          size="mini"
          @keyup.enter.native="searchCommodity"/>
      </span>
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;" height="400">
      <el-table-column label="宝贝" width="540px">
        <template slot-scope="scope">
          <div style="display: flex;">
            <div>
              <img :src="scope.row.link_url ? scope.row.link_url[0].url : ''" alt="点击打开" class="el-avatar" @click="viewImg(scope.row.link_url)" @click.stop>
            </div>
            <div style="margin-left: 20px;">
              <div>{{ scope.row.name }}</div>
            </div>
          </div>
          <!-- 图片放大预览功能 -->
        </template>
        <imgMode ref="imgShow"/>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="addCommodityToList(scope.row)">选择宝贝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      :current-page="query.page + 1"
      :page-size="query.size"
      :total="query.total"
      background
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="thisSizeChange"
      @current-change="thisPageChange"/>
  </el-dialog>
</template>

<script>
import { getCommodityList } from '@/api/mall/label'
import imgMode from './imgMode'
export default {
  components: { imgMode },
  props: {
    label_id: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      data: [],
      query: {
        name: '',
        page: 0,
        size: 10,
        total: 0,
        sort: 'commodity_id,desc'
      }
    }
  },
  methods: {
    getList() {
      this.loading = true
      this.query.page = this.query.page - 1
      this.query['label_id'] = this.label_id
      getCommodityList(this.query).then(res => {
        this.loading = false
        this.query.total = res.totalElements
        this.data = res.content
      })
    },
    searchCommodity() {
      // 搜索功能
      this.getList()
    },
    refresh() {
      this.query.page = 0
      this.getList()
    },
    thisSizeChange(e) {
      // 改变每页条数
      this.query.page = 0
      this.query.size = e
      this.getList()
    },
    thisPageChange(e) {
      // 改变当前页面
      this.query.page = e
      this.getList()
    },
    addCommodityToList(info) {
      // 选择商品至主页面的商品列表
      this.$emit('msgEvent', info)
    },
    cancel() {
      this.resetForm()
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        customer_type: 0
      }
    },
    viewImg(url) {
      // 图片放大预览
      this.$refs.imgShow.dialog = true
      this.$refs.imgShow.imgUrl = url ? url[0].url : ''
    },
    decimal(num) {
      if (!num) {
        return '0.00'
      }
      return num.toFixed(2)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
